<template>
  <view class="order">
    <scroll-view
      :style="{ height: scrollHeight + 'px' }"
      scroll-y
    >
      <!-- 头部 -->
      <view class="header">
        <image
          class="header-bg"
          src="/pages/activity/static/mosushop/order/header-bg.jpg"
        />
        <view class="header-top">
          <image
            class="header-icon"
            src="/pages/activity/static/mosushop/order/coin-icon.png"
          />
          <view class="header-title">我的雪王币</view>
        </view>
        <view class="header-content">
          <view class="text-base">雪王币余额</view>
          <view class="header-coin-value">20</view>
        </view>
        <view class="header-rule">规则</view>
        <button class="header-exchange-btn">兑换记录</button>
      </view>
      <!-- 菜单栏 -->
      <view class="menubar">
        <view class="menubar-header">
          <view class="menubar-header-title">我的订单</view>
          <view class="menubar-header-subtitle">
            <view>全部订单</view>
            <uni-icons
              type="right"
              size="16"
              color="#AAAAAA"
            />
          </view>
        </view>
        <view class="menubar-menu">
          <view class="menubar-item">
            <image
              class="menubar-item-icon"
              src="/pages/activity/static/mosushop/order/order_pay.png"
            />
            <view>待付款</view>
          </view>
          <view class="menubar-item">
            <image
              class="menubar-item-icon"
              src="/pages/activity/static/mosushop/order/order_receive.png"
            />
            <view>待收货</view>
          </view>
          <view class="menubar-item">
            <image
              class="menubar-item-icon"
              src="/pages/activity/static/mosushop/order/order_cancel.png"
            />
            <view>已取消</view>
          </view>
          <view class="menubar-item">
            <image
              class="menubar-item-icon"
              src="/pages/activity/static/mosushop/order/order_finish.png"
            />
            <view>已完成</view>
          </view>
          <view class="menubar-item">
            <image
              class="menubar-item-icon"
              src="/pages/activity/static/mosushop/order/order_sale.png"
            />
            <view>售后</view>
          </view>
        </view>
      </view>
      <!-- 广告 -->
      <view class="ad-secion">
        <image
          src="/static/images/base/ad.png"
          mode="widthFix"
        />
      </view>
      <!-- 热门商品 -->
      <view class="hot-section">
        <view class="hot-section-header">
          <image
            class="hot-section-header-icon"
            src="/pages/activity/static/mosushop/order/hot.png"
          />
          <view class="hot-section-header-title">热门兑换</view>
        </view>
        <scroll-view
          class="hot-section-products"
          scroll-x
        >
          <view
            class="hot-section-products-item"
            v-for="(item, index) in hotProductList"
            :key="index"
          >
            <image
              :src="item.image"
              mode="widthFix"
            />
          </view>
        </scroll-view>
      </view>
    </scroll-view>
  </view>
</template>
<script>
export default {
  name: "Order",
  data() {
    return {
      scrollHeight: 0,
      hotProductList: [
        { image: "/pages/activity/static/mosushop/images/5.jpg" },
        { image: "/pages/activity/static/mosushop/images/6.jpg" },
        { image: "/pages/activity/static/mosushop/images/10.jpg" }
      ]
    }
  },
  created() {
    this.scrollHeight = uni.getSystemInfoSync().windowHeight - 44 - uni.upx2px(150)
  }
}
</script>
<style lang="scss" scoped>
.order {
  width: 750rpx;
  height: 100%;
  background-color: #fff;
}

.header {
  width: 750rpx;
  height: 360rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #a16534;

  &-bg {
    width: 750rpx;
    height: 360rpx;
    position: absolute;
    left: 0;
    top: 0;
  }

  &-top {
    position: absolute;
    left: 30rpx;
    top: 46rpx;
    display: flex;
    align-items: center;
    gap: $uni-spacing-row-sm;
    padding: $uni-spacing-row-base $uni-spacing-row-lg;
  }

  &-icon {
    width: 48rpx;
    height: 48rpx;
  }

  &-title {
    color: #a16534;
    font-size: $uni-font-size-xl;
    font-weight: 600;
  }

  &-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: $uni-spacing-row-lg;
    z-index: 2;
  }

  &-coin-value {
    margin-top: $uni-spacing-row-xl;
    font-weight: 600;
    font-size: 58rpx;
  }

  &-rule {
    position: absolute;
    right: 36rpx;
    top: 82rpx;
    font-size: $uni-font-size-sm;
    text-decoration: underline;
  }

  &-exchange-btn {
    position: absolute;
    right: 30rpx;
    top: 146rpx;
    width: 132rpx;
    height: 48rpx;
    background-image: url("/pages/activity/static/mosushop/exchange-bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: $uni-font-size-base;
    color: #fff;
  }
}

.menubar {
  margin: $uni-spacing-row-xl $uni-spacing-row-base;
  background-color: #fff;
  border-radius: $uni-border-radius-xl;
  display: flex;
  flex-direction: column;
  box-shadow: $uni-shadow-base;

  &-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: $uni-spacing-row-xl;
    border-bottom: 1rpx solid $uni-border-color;

    &-title {
      font-size: $uni-font-size-xl;
      color: $uni-text-color;
      font-weight: 600;
    }

    &-subtitle {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: $uni-spacing-row-sm;
      font-size: $uni-font-size-sm;
      color: $uni-text-color-grey;
    }
  }

  &-menu {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }

  &-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50rpx 0;
    gap: $uni-border-radius-lg;
    font-size: $uni-font-size-sm;
    color: $uni-text-color;
    font-weight: 600;

    &-icon {
      width: 50rpx;
      height: 50rpx;
    }
  }
}

.ad-secion {
  margin: $uni-spacing-row-xl $uni-spacing-row-base;
  image {
    width: 100%;
    border-radius: $uni-border-radius-xl;
  }
}

.hot-section {
  margin: $uni-spacing-row-xl 0;

  &-header {
    display: flex;
    align-items: center;
    padding: $uni-spacing-row-xl $uni-spacing-row-base;
    color: $uni-text-color;
    font-size: $uni-font-size-xl;
    font-weight: 600;
    gap: $uni-spacing-row-sm;

    &-icon {
      width: 48rpx;
      height: 48rpx;
    }
  }

  &-products {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    height: 200rpx;

    &-item {
      display: inline-block;
      width: 304rpx;
      height: 189rpx;
      margin-left: $uni-spacing-row-base;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
